<template>
<div>
  <div>
    <br>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="申请类型">
        <el-select v-model="formInline.jr_product_type" placeholder="申请类型">
          <el-option label="请选择" value=""></el-option>
          <el-option label="租房分期" value="1"></el-option>
          <el-option label="收房贷" value="2"></el-option>
          <el-option label="应收租约保理" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请状态">
        <el-select v-model="formInline.apply_state" placeholder="申请状态">
          <el-option label="请选择" value=""></el-option>
          <el-option label="待审核" value="1"></el-option>
          <el-option label="初审通过(待复审)" value="2"></el-option>
          <el-option label="初审不通过" value="3"></el-option>
          <el-option label="复审通过" value="4"></el-option>
          <el-option label="复审不通过" value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="查询日期">
        <el-date-picker v-model="formInline.create_time1" type="date" placeholder="选择日期"></el-date-picker>至
        <el-date-picker v-model="formInline.create_time2" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getlist">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="apply_order_no" label="申请合同号" width="200"></el-table-column>
      <el-table-column prop="loan_message" label="贷款信息" width="250"></el-table-column>
      <el-table-column prop="jr_product_type" label="申请类型" width="120">
        <template slot-scope="s">
          <span v-if="s.row.jr_product_type==1">租房分期</span>
          <span v-if="s.row.jr_product_type==2">收房贷</span>
          <span v-if="s.row.jr_product_type==3">应收租约保理</span>
        </template>
      </el-table-column>
      <el-table-column prop="loan_amount" label="贷款金额" width="100"></el-table-column>
      <el-table-column prop="month_limit" label="借款期限" width="100"></el-table-column>
      <el-table-column prop="create_time" label="申请日期" width="150"></el-table-column>
      <el-table-column prop="company_name" label="资金方" width="150"></el-table-column>
      <el-table-column prop="apply_state" label="申请状态" width="100">
        <template slot-scope="s">
          <span v-if="s.row.apply_state==1">待审核</span>
          <span v-if="s.row.apply_state==2">初审通过(待复审)</span>
          <span v-if="s.row.apply_state==3">初审不通过</span>
          <span v-if="s.row.apply_state==4">复审通过</span>
          <span v-if="s.row.apply_state==5">复审不通过</span>
        </template>
      </el-table-column>
      <el-table-column prop="remarks" label="驳回原因" width="100"></el-table-column>
    </el-table>
  </div>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formInline.pageNum"
      :page-sizes="[5,10,30,50]"
      :page-size="formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formInline.total">
    </el-pagination>
  </div>
</div>
</template>

<script>
import { listInstallment } from "@/api/jinrong/installment";
export default {
  data() {
    return {
      tableData: [],
      formInline: {
        jr_product_type: '',
        apply_state: '',
        create_time1:'',
        create_time2:'',
        pageNum:1,
        pageSize:10,
        total:5,
      },

    }
  },
  methods:{
    /**
     * 融资申请查询
     */
    getlist() {
      listInstallment(this.formInline).then(response=>{
        console.log(response);
        this.tableData=response.rows;
        this.formInline.pageNum=response.pageNum;
        this.formInline.pageSize=response.pageSize;
        this.formInline.total=response.total;
      })
    },
    /**
     * 分页信息
     * @param val
     */
    handleSizeChange(val) {
      this.formInline.pageSize=val;
      console.log(`每页 ${val} 条`);
      this.getlist();
    },
    handleCurrentChange(val) {
      this.formInline.pageNum=val
      console.log(`当前页: ${val}`);
      this.getlist();
    }
  },
  created() {
    this.getlist();
  }
}
</script>

<style scoped>

</style>
